<template>
  <view class="order-container">
<!--    <view class="header-container">-->
<!--      <view class="left"></view>-->
<!--      <view class="center">订单</view>-->
<!--      <view class="right"></view>-->
<!--    </view>-->
    <view class="tabs-container">
      <view :class="{ tab: true, active: tabIndex === orderStatusEnum.all }" @click="onChange(orderStatusEnum.all)">
        <view class="label">
          <text>全部</text>
          <view class="high-light"></view>
        </view>
      </view>
      <view :class="{ tab: true, active: tabIndex === orderStatusEnum.pendding }" @click="onChange(orderStatusEnum.pendding)">
        <view class="label">
          <text>待支付</text>
          <view class="high-light"></view>
        </view>
      </view>
      <view :class="{ tab: true, active: tabIndex === orderStatusEnum.notuse }" @click="onChange(orderStatusEnum.notuse)">
        <view class="label">
          <text>待使用</text>
          <view class="high-light"></view>
        </view>
      </view>
      <view :class="{ tab: true, active: tabIndex === orderStatusEnum.complete }" @click="onChange(orderStatusEnum.complete)">
        <view class="label">
          <text>已完成</text>
          <view class="high-light"></view>
        </view>
      </view>
    </view>
    <scroll-view class="main-container" :scroll-y="true" @scrolltolower="nextPage" @refresherrefresh="getOrders">
      <view v-if="!isLogined" class="empty-container">
        <img src="~@/static/order_slices/notlogin.png" alt="">
        <text class="tips">当前操作需要先登录</text>
        <view class="toselect-btn" @click="toLogin">前往登录</view>
      </view>
      <view v-else-if="orderList.length > 0" class="orders-container">
        <view class="order" v-for="order in orderList" :key="order.id" @click="toPage('/pages/order/detail?id=' + order.id)">
          <img :src="order.image_url" alt="">
          <view class="message">
            <view class="title">{{ order.title }}</view>
            <view class="detail">数量：{{ order.paid_through }}</view>
            <view class="detail">总价：{{ order.amount }}</view>
            <view class="detail">下单时间：{{ order.created_at }} </view>
          </view>
          <view class="status">
            <view class="pendding" v-if="order.status === 0">待支付</view>
            <view class="complete" v-if="order.status === 3">已完成</view>
          </view>
        </view>
      </view>
      <view v-else class="empty-container">
        <img src="~@/static/order_slices/empty.png" alt="">
        <text class="tips">当前订单为空，您可以选择商品下单</text>
        <view class="toselect-btn" @click="toProducts">前往选择商品</view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import i18n from '@/lang';
import { token } from '@/util/storage';
import Vue from "vue";
import Config from '../../Config';

export default Vue.extend({
  computed: {
    redirect() {
      return encodeURI("/pages/items/index");
    }
  },
  data() {
    return {
      orderStatusEnum: new Config().ORDER_STATUS_ENUM,
      tabIndex: new Config().ORDER_STATUS_ENUM.all,
      orderList: [],
      orderPage: 1,
      orderTotle: 0,
      isLogined: false
    }
  },
  watch: {
    tabIndex() {
      this.getOrders(this.tabIndex);
    }
  },
  mounted() {
    this.getOrders(this.tabIndex);
  },
  methods: {
    onChange(value: number) {
      this.tabIndex = value;
      this.orderPage = 1;
      this.orderTotle = 0;
      this.orderList = [];
      this.getOrders(this.tabIndex);
      uni.showLoading({
        title: "正在加载",
        mask: true,
      })
    },
    getOrders(status: number) {
      this.isLogined = !!token.get();
      if (!token.get()) {
        uni.showToast({
          title: i18n.t("main_service.need_login").toString(),
          duration: 2000,
          icon: "none"
        });
        // this.toLogin();
        return;
      }
      this.$mainApi.apiGetOrdersByPage(1, this.orderPage * new Config().INDEX_ORDER_PAGE_SIZE, status).then((res) => {
        console.log("订单列表", res.data.records);
        uni.hideLoading()
        this.orderTotle = res.data.total;
        this.orderList = res.data.records.map((order: any) => ({
          id: order.id,
          productId: order.productId,
          title: JSON.parse(order.productDetail).title,
          image_url: JSON.parse(order.productDetail).imageUrl,
          paid_through: JSON.parse(order.productDetail).length,
          amount: order.amount,
          created_at: order.updatedAt
        }))
      });
    },
    nextPage() {
      if (this.orderTotle <= this.orderList.length) return;
      this.orderPage ++;
      this.getOrders(this.tabIndex);
    },
    toLogin() {
      if (!token.get()) {
        location.href = "/#/pages/login/wechat?redirect=" + this.redirect;
      } else {
        this.getOrders(this.tabIndex);
      }
    },
    toProducts() {
      location.href = "/#/pages/items/index";
    },
    toPage(path: string) {
      location.href = "/#" + path;
    }
  }
});
</script>

<style scoped>
.order-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F4F7F7;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs-container {
  color: #333333;
  height: 50px;
  padding-top: 15px;
  display: flex;
  border-bottom: #666666;
  box-shadow: 0px 0px 2px 0px #ded5d5;
}

.tabs-container .tab {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs-container .tab .label {
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

.high-light {
  height: 4px;
  margin-top: 4px;
  border-radius: 3px;
}

.tabs-container .tab.active .label {
  color: #006b65;
}

.tabs-container .tab.active .high-light {
  background-color: #006b65;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
}

.orders-container {
  padding: 15px;
}

.order {
  height: 82px;
  margin-bottom: 15px;
  padding: 20px 15px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
}

.order img {
  width: 82px;
  height: 82px;
  background-color: #cccccc;
  border-radius: 5px;
  flex-shrink: 0;
}

.order .message {
  padding-left: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.order .message .title {
  color: #333333;
  font-size: 16px;
  font-weight: bolder;
}

.order .message .detail {
  color: #999999;
  font-size: 12px;
}

.order .status {
  font-size: 16px;
}

.order .status .pendding {
  color: #FF5400;
}

.order .status .complete {
  color: #999999;
}

.empty-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-container img {
  width: 30%;
  margin-bottom: 15px;
}

.empty-container .tips {
  color: #9A9A9A;
  font-size: 16px;
}

.empty-container .toselect-btn {
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 15px;
  padding: 10px;
  background-color: #006b65;
  border-radius: 6px;
}
</style>
